<template>
  <div class="ws_members_module">
    <header>
      <ws-search :value="selectQuery" @change="onChange" />
      <div class="customers">
        <i class="iconfont icon-customer-filter" />
        <scroll-num
          :num="CurrentEmployeesNum"
          :height="22"
          :fontStyle="{
            fontSize: '14px',
            fontWeight: 200,
            width: '9px'
          }"
        />
      </div>
    </header>
    <section>
      <div v-for="group in filterMembers" :key="group.title" class="employee-group">
        <span class="title">{{ group.title }}</span>
        <ul>
          <li v-for="(employee, index) in group.employees" :key="index">
            <div class="user">
              <Avator :username="employee.name" size="mini" />
              <div class="message">
                <span>{{ employee.name }}</span>
                <span>{{ employee.position }}</span>
              </div>
            </div>
            <div class="icons">
              <i class="iconfont icon-message" />
              <i class="iconfont icon-integral" />
            </div>
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
// type declaration
import { Getter } from 'vuex-class'
import { Component, Watch } from 'vue-property-decorator'
import { AxiosResponse } from 'axios'
import { ApartmentListType, BasicEmployeeType } from '@/interface/Basic'
// vue components
import Avator from '@/components/basic/Avator.vue'
import WsSearch from '@/components/tool/ws-search.vue'
import ScrollNum from '@/components/tool/ws-scroll-num.vue'
// utilities
import { deepClone } from '@/utils/specificFunc'
import { GetEmployeeByDepartment } from '@/api/employee'
@Component({
  components: {
    Avator,
    WsSearch,
    ScrollNum
  }
})
class WSMembers extends Vue {
  @Getter('name') name!: string
  selectQuery: string = ''
  filterMembers: ApartmentListType = []
  employee_total_list: ApartmentListType = []
  get CurrentEmployeesNum() {
    return this.filterMembers.reduce((accu, next) => {
      return accu + next.employees.length
    }, 0)
  }
  @Watch('selectQuery', { immediate: true })
  sq_handler(newVal: string) {
    const res: ApartmentListType = []
    const employee_origin = deepClone(this.employee_total_list)
    employee_origin.forEach(group => {
      const filterEmployees = group.employees.filter(
        employee => employee.name.toString().indexOf(newVal) !== -1
      )
      if (filterEmployees.length !== 0) {
        group.employees = filterEmployees
        res.push(group)
      }
    })
    this.filterMembers = res
  }
  mounted() {
    this.getEmployeesList()
  }
  onChange(e: string) {
    this.selectQuery = e
  }
  computedLevel(position: string) {
    if (position.indexOf('经理') !== -1) return 2
    else if (position.indexOf('组长') !== -1) return 3
    else return null
  }
  getEmployeesList() {
    GetEmployeeByDepartment({
      Departmentid: ['综合管理部', '装配车间', '职能组', '电子车间', '质量部']
    })
      .then((res: AxiosResponse<{ ReturnData: BasicEmployeeType[] }>) => {
        const { ReturnData } = res.data
        const map = new Map()
        const result: ApartmentListType = []
        ReturnData.forEach(employee => {
          const { Name, Position, DepartmentName } = employee
          const formated_employee = {
            name: Name,
            position: Position,
            level: this.computedLevel(Position)
          }
          if (!map.get(DepartmentName)) {
            map.set(DepartmentName, [formated_employee])
          } else {
            map.set(DepartmentName, [...map.get(DepartmentName), formated_employee])
          }
        })
        map.forEach((value, key) => {
          result.push({
            title: key,
            employees: [...value]
          })
        })
        this.employee_total_list = result
        this.selectQuery = ''
        this.filterMembers = result
      })
      .catch(err => {
        console.log(err)
      })
  }
}
export default WSMembers
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.ws_members_module {
  touch-action: none;
  #flex(column, center, flex-start);
  header {
    width: 100%;
    box-sizing: border-box;
    #flex(row, center, flex-end);
    .customers {
      box-sizing: border-box;
      padding: 0 5px;
      height: 28px;
      margin-left: 5px;
      border-radius: 6px;
      #flex(row, center, space-between);
      #color(color, --primary-text-color);
      #color(background-color, --primary-bg-color);
      span {
        font-size: 14px;
      }
    }
  }
  section {
    width: 100%;
    flex: 1;
    overflow: auto;
    .employee-group {
      .title {
        display: inline-block;
        width: 100%;
        font-size: 12px;
        text-align: left;
        #color(color, --lighter-text-color);
      }
      ul {
        li {
          box-sizing: border-box;
          padding: 5px 10px;
          width: 100%;
          #flex(row, center, space-between);
          .user {
            #flex(row, center, flex-start);
            .message {
              #flex(column, flex-start, space-between);
              span {
                font-size: 14px;
                #color(color, --primary-text-color);
              }
              span:last-child {
                font-size: 12px;
                #color(color, --lighter-text-color);
              }
            }
          }
          .icons {
            #flex(row, center, flex-end);
            i {
              box-sizing: border-box;
              padding: 5px;
              border-radius: 50%;
              margin-right: 5px;
              transition: all 0.2s ease;
              #color(background-color, --primary-bg-color);
            }
            i:last-child {
              margin-right: 0;
            }
            i:hover {
              #color(background-color, --heavier-bg-color);
            }
          }
        }
      }
    }
  }
}
</style>
